<template>
  <div class="home_child_container">
    <a-card class="message_card" :loading="contactUserLoading">
      <template #title>消息中心</template>
      <a-list class="contact_person_list" item-layout="vertical" v-show="isShow" :data-source="contactUserList"
              :pagination="contactUserList.length>0?pagination:null">
        <template #renderItem="{ item }">
          <a-list-item :key="item.id">
            <contact-person-item :user="item" @click.stop="sessionTo(item)"/>
          </a-list-item>
        </template>
      </a-list>
      <div class="session_div" v-if="!isShow">
        <a-space class="session_div_header" @click="back">
          <LeftOutlined/>
          <span>{{ sessionUser.name }}</span>
        </a-space>
        <a-textarea v-model:value="content" :maxlength="500" :autosize="{ minRows: 3, maxRows: 10 }"
                    showCount placeholder="文明发言，请输入私信内容..." :disabled="sessionUser.id==='ALERT_ADMIN'"/>
        <div class="row_flex_end">
          <a-button type="primary" @click="sendMessage" :disabled="sessionUser.id==='ALERT_ADMIN'">发送</a-button>
        </div>
        <a-list class="message_list" item-layout="vertical" :split="false" :loading="messageLoading"
                :pagination="messagePagination" :data-source="messageList">
          <template #renderItem="{ item }">
            <a-list-item :key="item.id">
              <message-item :message="item" :friend="sessionUser"/>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { LeftOutlined } from '@ant-design/icons-vue'
import ContactPersonItem from '@/components/item/ContactUserItem'
import MessageItem from '@/components/item/MessageItem'
import { GetMessagePage, ReadMessage, SendMessage } from '@/service/message'
import { GetContactUserPage } from '@/service/user'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      isShow: true,
      contactUserList: [],
      contactUserLoading: true,
      pagination: {
        current: 1,
        total: 0,
        onChange: async (page) => {
          state.pagination.current = page
          await methods.getContactPerson()
        }
      },
      sessionUser: {
        id: '',
        name: 'cetacea',
        domain: '',
        avatar: '',
        unreadCount: 0,
        content: '',
        createdTime: ''
      },
      content: '',
      messageList: [],
      messageLoading: false,
      messagePagination: {
        current: 1,
        total: 0,
        onChange: async (page) => {
          state.messagePagination.current = page
          await methods.getMessage()
        }
      }
    })

    const methods = reactive({
      getContactPerson: async () => {
        state.contactUserLoading = true
        const {
          count,
          list
        } = await GetContactUserPage(state.pagination.current)
        state.pagination.total = count
        state.contactUserList = list
        state.contactUserLoading = false
      },
      getMessage: async () => {
        state.messageLoading = true
        const {
          count,
          list
        } = await GetMessagePage(state.sessionUser.id, state.messagePagination.current)
        state.messagePagination.total = count
        state.messageList = list
        state.messageLoading = false
      },
      sessionTo: async (item) => {
        state.isShow = false
        state.sessionUser = item
        state.messagePagination.current = 1
        await methods.getMessage()
        await ReadMessage(state.sessionUser.id)
      },
      sendMessage: async () => {
        if (state.content.trim().length === 0) {
          proxy.$message.info('请输入内容！')
          return
        }
        await SendMessage({
          receiverId: state.sessionUser.id,
          content: state.content.trim()
        })
        state.content = ''
        proxy.$message.success('已发送！')
        state.messagePagination.current = 1
        await methods.getMessage()
        await ReadMessage(state.sessionUser.id)
      },
      back: async () => {
        state.isShow = true
        state.content = ''
        await methods.getContactPerson()
      }
    })

    onMounted(async () => {
      await methods.getContactPerson()
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  },
  components: {
    MessageItem,
    ContactPersonItem,
    LeftOutlined
  }
})
</script>

<style lang="less" scoped>
.message_card {
  width: 100%;

  & .session_div_header {
    padding: 10px 0;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
  }

  & .message_list {
    margin-top: 20px;
  }
}
</style>
